<!--创建一个子组件 : 用于接收 name和age 作为props,并显示这些信息-->
<template>
  <!--  定义模板参数 template 包含了组件的html结构-->
  <div>
    <h1>Hello,{{ name }}!</h1>
    <p>You are {{ age }} years old.</p>
  </div>
</template>
<script setup lang="ts">
import {defineProps} from 'vue';

// 定义props 使用defineProps 函数来定义组件接受的props
// props 接收一个对象,对象中包含属性名和属性类型
// name 属性名,必须是一个字符串,并且是必须传递的
// age 属性名,必须是一个数字,并且是必须传递的
// script setup 语法糖,可以省略export default 是vue3的新特性,简化组件的编写过程
const props = defineProps({
  name: {
    type: String,
    required: true
  },
  age: {
    type: Number,
    required: true
  },
});

</script>
<style scoped>

</style>
